<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="css/selectfile.css">
</head>
<body>
<div class="select-file-wrapper" id="select-file-wrapper">
	<div class="header clearfix">
		插片资源
		<div class="select-list">
            <span class="import" id="import">导入 <em class="arrow"></em></span>
			<ul class="importMenu hide" id="importMenu">
    			<li>商品图册</li>
    			<li id="localFile">本地上传</li>
    		</ul>
		</div>
	</div>
	<!-- left值取决于哪个高度最小 -->
	<div class="pic-list" id="select-file-list">
	</div>
</div>

<script src="js/jquery.min.js"></script>
<script src="js/selectfile.js"></script>
<script type="text/javascript">
$(function(){
    var $menuList = $('#importMenu');
    var $arrow = $('#import .arrow');
    var $localBtn = $('#localFile');
    var $list = $('#select-file-list');
    $('#import,#importMenu').off('click').on('click',function(){
        $menuList.toggleClass('hide');
        $arrow.toggleClass('up');
    })
    

    $list.css({
        'height' : $(window).height()-$list.prev().height()
    })

    $(window).resize(function(){
        $list.css({
            'height' : $(window).height()-$list.prev().height()
        })
    })
    
    var fileCallback = function(){
        var index =0;
        var hasLoaded = false;
        var $dom =$('#select-file-list .pic-list-piece');
        var finish = false;
        var iLength = $dom.length;
        for(var i = 0;i<iLength;i++){
             (function(i){
                var $tDom = $dom.eq(i);
                if(!$tDom.hasClass('selected')){
                    var timer = setInterval(function(){
                        var iHeight = $tDom.find('img').height();

                        if( iHeight >0 ){
                            clearInterval(timer);
                            $tDom.addClass('selected');
                            var iTop = 0,iLeft = 0;
                            if(i == 1){
                                iLeft = 125;
                                $tDom.addClass('odd');
                            }
                            if(i == 0){
                                $tDom.addClass('even');
                            }
                            if(i == 0 || i == 1){
                                iTop = 15;
                            }else{
                                var lastEven = $('#select-file-list').find('.even').last();
                                var lastOdd = $('#select-file-list').find('.odd').last();
                                var lastEvenTop = parseInt(lastEven.css('top')) + lastEven.outerHeight();
                                var lastOddTop = parseInt(lastOdd.css('top')) + lastOdd.outerHeight()

                                if(lastEvenTop < lastOddTop){
                                    iLeft = 0 
                                    iTop = lastEvenTop + 15;
                                    $tDom.addClass('even');
                                }else{
                                    iLeft = 125
                                    iTop = lastOddTop + 15;
                                    $tDom.addClass('odd');
                                }
                            }
                            
                            $tDom.css({
                                left: iLeft,
                                top : iTop
                            })
                            
                            $tDom.animate({'opacity':1},300);
                        }
                    },500)
                }
             })(i)
             
        }
    }
    
	$list.selectfile({
        tpl : '<div class="pic-list-piece">\
                <img src="{{imgSrc}}" alt="">\
                <span class="layer"></span>\
                <em class="delete"></em>\
            </div>',
        localUpload : true,
        UploadBtn : $localBtn,
        callback : fileCallback
	});	
})

</script>
</body>
</html>